<template>
  <details-layout
    class="relative-position"
    :data="data"
    moreUrl="/standard"
    channel="standard"
    contentField="英文名"
    titleField="名称"
    labelField="标准号">
    <!-- <div :class="`status-label phase-${phase}`">{{$t(phaseNames[phase])}}</div> -->
    <div class="title text-center q-pt-lg">{{data.标题}}</div>
    <div class="subtitle text-center q-pb-lg" v-if="$i18n.locale !== 'en-us'">{{data.英文名}}</div>
    <div class="info row no-wrap relative-position justify-end">
      <div class="type absolute-center row no-wrap">
        <div class="q-ml-md">{{$t('类型')}}: {{data.类型}}</div>
      </div>
      <div class="date">{{data.日期 | normalDate}}</div>
    </div>

    <div class="details">
      <div class="row items-center justify-center q-pb-xl no-wrap">
        <div class="status-line relative-position" :class="{passed: phase > 0}">
          <div class="start-shadow"></div>
        </div>
        <div class="status-dot" :class="{passed: phase > 0,
          red: phase === 1 && data.Status === '-1'}">
          <div class="content">{{$t('提议')}}</div>
          <div class="content-date" v-if="data.提议日">{{data.提议日 | normalDate}}</div>
        </div>
        <div class="status-line" :class="{passed: phase > 1}"></div>
        <div class="status-dot" :class="{passed: phase > 1,
          red: phase === 2 && data.Status === '-1'}">
          <div class="content">{{$t('立项')}}</div>
          <div class="content-date" v-if="data.立项日">{{data.立项日 | normalDate}}</div>
        </div>
        <div class="status-line" :class="{passed: phase > 2}"></div>
        <div class="status-dot" :class="{passed: phase > 2,
          red: phase === 3 && data.Status === '-1'}">
          <div class="content">{{$t('拟订')}}</div>
          <div class="content-date" v-if="data.拟订日">{{data.拟订日 | normalDate}}</div>
        </div>
        <div class="status-line" :class="{passed: phase > 3}"></div>
        <div class="status-dot" :class="{passed: phase > 3,
          red: phase === 4 && data.Status === '-1'}">
          <div class="content">{{$t('审核')}}</div>
          <div class="content-date" v-if="data.审核日">{{data.审核日 | normalDate}}</div>
        </div>
        <div class="status-line" :class="{passed: phase === 4 && data.Status === '1'}"></div>
        <div class="status-dot" :class="{passed: phase === 4 && data.Status === '1'}">
          <div class="content">{{$t('发布')}}</div>
          <div class="content-date" v-if="data.发布日">{{data.发布日 | normalDate}}</div>
        </div>
        <div class="status-line relative-position"
          :class="{passed: phase === 4 && data.Status === '1'}">
          <div class="end-shadow"></div>
        </div>
      </div>
      <div class="column no-wrap q-py-xl">
        <div class="row properties-list"
          v-for="(prop, idx) in properties|| []"
          :key="idx">
          <div class="col row no-wrap items-center property-entry" v-if="(idx % 2) === 0 && prop">
            <div class="property-label">{{$t(prop.label)}}</div>
            <div class="property-value q-ml-md" v-if="!prop.d">
              {{propertyValue(prop.value)}}</div>
            <div class="property-value q-ml-md" v-else>
            {{propertyValue(prop.value) | normalDate}}</div>
          </div>
          <div class="col row no-wrap items-center property-entry"
            v-if="(idx % 2) === 0 && properties[idx + 1]">
            <div class="property-label">{{$t(properties[idx + 1].label)}}</div>
            <div class="property-value q-ml-md" v-if="!properties[idx + 1].d">
              {{propertyValue(properties[idx + 1].value)}}</div>
            <div class="property-value q-ml-md" v-else>
            {{propertyValue(properties[idx + 1].value) | normalDate}}</div>
          </div>
        </div>
      </div>

      <div class="" v-html="data.详情" v-if="data.详情"></div>
      <pdfviewer
        version="clear"
        v-else-if="data && data.文件 && data.文件.id"
        :src="data.文件.id | serverDocument"
        v-model="showPreview"
        type="pdfjs"
        style="height: 1200px; max-width: 100%;"></pdfviewer>

      <div class="content" v-else>{{data.范围}}</div>

      <!-- <div class="link q-my-lg full-width text-right">
        <a :href="data.链接" target="_blank">{{$t('查看原文')}}</a>
      </div> -->
      <step-one v-if="data && data.CurrentStep === 1"></step-one>
      <step-two v-else-if="data && data.CurrentStep === 2"></step-two>
      <step-three v-else-if="data && data.CurrentStep === 3"
        :data="data"
        @post-comment="postComment"
        @delete-comment="deleteComment"
        @edit-comment="editComment"
        @reply-comment="replyComment"
        ></step-three>
      <step-four v-else-if="data && data.CurrentStep === 4"></step-four>
    </div>
  </details-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnIDChange } from '@/modules/portal/components/mixins/data';
import DetailsLayout from '@/modules/portal/components/detailsLayout';
import pdfviewer from '@/modules/portal/components/pdfviewer';

import StepOne from './details1';
import StepTwo from './details2';
import StepThree from './details3';
import StepFour from './details4';

export default {
  name: 'StandardDetails',
  mixins: [mixins.ObjectDataMixin, RefreshOnIDChange],
  components: {
    DetailsLayout,
    pdfviewer,
    StepOne,
    StepTwo,
    StepThree,
    StepFour,
  },
  data() {
    return {
      phase: 0,
      phaseNames: [
        '未发布',
        '即将实施',
        '现行',
        '废止',
      ],
      showPreview: true,
      properties: [
        {
          label: '标准号',
          value: '标准号',
        },
        {
          label: '英文名称',
          value: '英文名',
        },
        {
          label: '类型',
          value: '类型',
        },
        {
          label: '发布日期',
          value: '发布日',
          d: true,
        },
        {
          label: '实施日期',
          value: '实施日',
          d: true,
        },
        {
          label: '归口单位',
          value: '单位',
        },
        // {
        //   label: '执行单位',
        //   value: '单位',
        // },
        // {
        //   label: '主管部门',
        //   value: '主管部门',
        // },
        null,
        {
          label: '起草单位',
          value: '起草单位',
        },
        null,
        {
          label: '起草人',
          value: '起草人',
        },
      ],
    };
  },
  computed: {
    propertyValue() {
      return (vn) => {
        let v;
        if (typeof vn === 'function') {
          v = vn(this.data);
        } else {
          v = this.data && this.data[vn];
        }

        if (Array.isArray(v)) return v.join('、');

        return v || '';
      };
    },
  },
  methods: {
    afterRefresh() {
      this.getComments();

      this.$store.commit('app/SET_CRUMBS', [
        {
          title: {
            1: '标准提议',
            2: '标准立项',
            3: '标准草案意见征集',
            4: '标准审核',
          }[this.data.CurrentStep || 3],
        },
        {
          title: '详情',
        },
      ]);

      this.phase = this.data.CurrentStep || 1;
    },
    getComments() {
      this.getRequest(`/stddev/dev/3/comments/${this.$route.params.id}`).then((d) => {
        if (d && d.msg === 'OK') {
          this.$set(this.data, 'Comments', d.data.docs || []);
        }
      });
    },
    postComment(comment) {
      if (!comment) return;

      this.postRequest('/stddev/dev/3/comments', {
        id: this.$route.params.id,
        comment,
      }).then((d) => {
        if (d && d.msg === 'OK') {
          this.$q.notify({
            message: '评论成功',
            color: 'positive',
          });

          this.getComments();
        }
      });
    },
    deleteComment(c) {
      this.$q.dialog({
        title: '删除评论',
        message: '确认删除该评论？',
        ok: {
          label: '确认',
          color: 'negative',
        },
        cancel: {
          label: '取消',
          color: 'grey',
        },
      }).onOk(() => {
        this.deleteRequest('stddev/dev/3/comments', {
          id: c.id,
        }).then(() => {
          this.$q.notify({
            message: '删除成功',
          });

          this.getComments();
        });
      });
    },
    editComment(c, comment) {
      this.putRequest('stddev/dev/3/comments', {
        id: c.id,
        comment,
      }).then(() => {
        this.$q.notify({
          message: '编辑成功',
        });

        this.getComments();
      });
    },
    replyComment(c, comment) {
      this.postRequest('stddev/dev/3/comments/reply', {
        id: c.id,
        comment,
      }).then(() => {
        this.$q.notify({
          message: '回复成功',
        });

        this.getComments();
      });
    },
  },
  beforeDestroy() {
    this.$store.commit('app/SET_CRUMBS', undefined);
  },
};
</script>

<style lang="scss" scoped>
.status-label {
  position: absolute;
  top: 80px;
  right: 10px;
  font-size: 32px;
  opacity: 0.4;
  width: 160px;
  // opacity: 0.5
  transform: rotate(20deg);
  color: #dfdfdf;

  &.phase- {
    &1,&2 {
      color: $primary;
    }

    &3 {
      color: red;
    }
  }
}
.details {
  .status-line {
    position: relative;
    background: #dfdfdf;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;

    height: 2px;
    width: 200px;

    .start-shadow {
      position: absolute;
      width: 20px;
      height: 100%;
      left: 0;
      background-image:linear-gradient(to right, white, rgba(248, 248, 248, 0));
    }

    .end-shadow {
      position: absolute;
      width: 20px;
      height: 100%;
      right: 0;
      background-image:linear-gradient(to left, white, rgba(248, 248, 248, 0));
    }
  }

  .status-dot {
    font-size: 14px;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    border: 2px solid #dfdfdf;
    position: relative;

    .content {
      position: absolute;
      top: -24px;
      left: -50%;
      width: 100px;
      text-align: center;
      left: -48px;
    }

    .content-date {
      position: absolute;
      top: 8px;
      width: 100px;
      text-align: center;
      left: -48px;
    }
  }

  .status-line,.status-dot {
    &.passed {
      background-color: $primary;
      border-color: $primary;
      color: $primary;

      &.red {
        background-color: red;
        border-color: red;
        color: red;
      }
    }
  }
   .property-entry {
     padding-top: 6px;
     padding-bottom: 6px;
     border-bottom: 1px dashed $grey-4;
   }
  .property-label {
    width: 120px;
    max-width: 120px;
    min-width: 120px;
    text-align: right;

    color: $primary;
    padding: 2px;
    font-size: 14px;
  }
  .property-value {
    font-size: 14px;
    line-height: 18px;
  }
}
</style>
